<template>
  <div class="target-warning-rules">
    <div class="early-warning">
      <el-input placeholder="请输入关键字" v-model="state.keyValue" class="input-with-select">
        <el-select v-model="state.dataType" slot="prepend" placeholder="请选择">
          <el-option v-for="item of state.select_list" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
      </el-input>
      <el-button class="my-button" type="primary">搜索</el-button>
      <el-button @click="handleAdd" type="primary" class="my-button">添加</el-button>
    </div>

    <div class="wrapper">
      <div class="table-con">
        <el-table
          height="100%"
          empty-text="暂无数据"
          max-height="100%"
          border
          class="my-table"
          :header-cell-style="elTableStyle.headerCellStyle"
          :data="state.tableData">
          <el-table-column
            align="center"
            label="等级">
            <template #default="scope">
              <span class="leval" :style="{ backgroundColor: getLeavalColor(scope.row.leval) }"></span>
            </template>
          </el-table-column>
          <el-table-column type="expand">
            <div>
              <p v-for="i in 100">{{ i }}</p>
            </div>
          </el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="type">
          </el-table-column>
          <el-table-column
            label="关键信息"
            align="center"
            prop="account_number">
          </el-table-column>
          <el-table-column
            label="数量"
            align="center"
            prop="num">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center">
            <template #default="scope">
              <div>
                <!-- <span class="operate" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i>编辑</span> -->
                <span class="operate"><i class="el-icon-edit"></i>编辑</span>
                <span class="operate" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i>删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-config-provider :locale="customPagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            v-model:current-page="state.currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="state.tableData.length">
          </el-pagination>        
        </el-config-provider>
      </div>

      <div class="my-chart-box">
        <div class="rule-type common-box-style">
          <h2>规则类型</h2>
          <div class="common-chart-box-style">
            <VEchart id="rule-type" :option="state.ruleTypeOption" />
          </div>
        </div>
        <div class="common-box-style">
          <h2>规则等级</h2>
          <div class="common-chart-box-style rule-level">
            <div class="chart-line"></div>
            <div class="rule-level-item" v-for="item of state.ruleLevelInfo" :key="item.level">
              <span class="ball" :style="{ backgroundColor: getLeavalColor(item.level) }"></span>
              <span class="rule-level-line"></span>
              <span class="num">{{item.num}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import elTableStyle from "../../../config/third-plugins/element/elTable";
import customPagination from "../../../config/third-plugins/customPagination";
import VEchart from "../../../libs/packages/v-echart/index";
interface twr {
  keyValue:string,
  dataType: string,
  select_list:Array<any>,
  tableData:Array<any>,
  currentPage:number,
  ruleTypeOption:any,
  ruleType:Array<any>,
  ruleLevelInfo:any
}

const state = reactive<twr>({
  keyValue: '',
  dataType: '',
  select_list: [
    {
      label: 'IPV4',
      value: 'IPV4'
    },
    {
      label: 'IP地址段',
      value: 'IP地址段'
    }
  ],

  tableData: [
    {
      id: 1,
      leval: '1',
      type: 'IPV4',
      account_number: '10.1.1.25',
      num: '451212/0'
    },
    {
      id: 3,
      leval: '3',
      type: 'IPV4',
      account_number: '10.1.1.25',
      num: '451212/0'
    },
    {
      id: 2,
      leval: '2',
      type: 'IPV4',
      account_number: '10.1.1.25',
      num: '451212/0'
    }
  ],

  currentPage: 1,

  ruleTypeOption: {},

  ruleType: ['IPV4', 'IM', 'IP地址段', 'MAIL', 'VOIP', 'FTP', '虚拟关键信息'],

  ruleLevelInfo: [
    {
      level: '1',
      num: '100'
    },
    {
      level: '2',
      num: '54'
    },
    {
      level: '3',
      num: '45'
    },
    {
      level: '4',
      num: '85'
    }
  ]
})

const handleAdd = () => {}

const handleDelete = (data:any) => {}

const getLeavalColor = (value:any) => {
  switch (value) {
    case '1':
      return '#03a9f4'
    case '2':
      return '#e5e600'
    case '3':
      return '#ff9933'
    default:
      return '#ff0000'
  }
}

const drawRuleType = () => {
  const ruleType = state.ruleType
  state.ruleTypeOption = {
    tooltip: {
      trigger: 'axis',
      show: true,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    dataZoom: [
      {
        id: 'dataZoomY',
        yAxisIndex: [0],
        show: true, // 是否显示滑动条，不影响使用
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 6, // 一次性展示6个
        width: 6, // 滚动条宽度
        borderColor: 'transparent', // 滚动条边框色
        fillerColor: '#c1c1c1', // 滚动条颜色
        zoomLock: true,
        showDataShadow: false, // 是否显示数据阴影 默认auto
        backgroundColor: '#f1f1f1', // 滚动条背景样色
        showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        realtime: true, // 是否实时更新
        filterMode: 'filter',
        handleIcon: 'circle',
        handleStyle: {
          color: 'rgba(205,205,205,1)',
          borderColor: 'rgba(205,205,205,1)'
        },
        handleSize: '80%',
        moveHandleSize: 0,
        maxValueSpan: 4,
        minValueSpan: 4,
        brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
      }, {
        type: 'inside',
        yAxisIndex: 0,
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true
      }
    ],
    grid: {
      left: '0%',
      right: '15%',
      bottom: '0%',
      top: '0',
      containLabel: true
    },
    xAxis: [{
      splitLine: {
        show: false
      },
      type: 'value',
      show: false
    }],
    yAxis: [{
      splitLine: {
        show: false
      },
      axisLine: { // y轴
        show: true,
        lineStyle: {
          color: '#a8b1c4',
          width: '2'
        }
      },
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#333'
      },
      data: ruleType,
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300
    }],
    series: [{
      name: '数量',
      type: 'bar',
      barWidth: '40%', // 柱子宽度
      label: {
        show: true,
        position: 'right', // 位置
        color: '#308dcc',
        fontSize: 12,
        // fontWeight: 'bold', // 加粗
        distance: 5 // 距离
      },
      itemStyle: {
        color: '#308dcc'
      },
      data: [320, 302, 341, 374, 390, 650, 420] // 柱子上方的数值
    }]
  }
}

const getLineWidth = () => {
  const len = state.ruleType.length
  let maxItem = ''
  if (len > 5) {
    maxItem = getMaxData(state.ruleType.slice(state.ruleType.length - 5))
  } else {
    maxItem = getMaxData(state.ruleType)
  }
  const leftDistance = maxItem.length * 9

  let numList = state.ruleLevelInfo.map((i:any) => {
    return i.num
  })
  numList = numList.sort((a:any, b:any) => b - a )
  const max = numList[0]
  const parent = document.querySelector('.rule-level-item')
  const ball = document.querySelector('.ball')
  const line:any = document.querySelector('.chart-line')

  const container:any = document.querySelector('.rule-level')
  if (container && ball && line) {
    container.style.paddingLeft = 11 + (leftDistance - ball.clientWidth) + 'px'
    line.style.left = 20 + (leftDistance - ball.clientWidth) + ball.clientWidth + 1 + 'px'
  }

  if (parent && ball) {
    const domArr = [...document.querySelectorAll('.rule-level-line')]
    const fullWidth = parent.clientWidth - ball.clientWidth - 60 - 10 - 5
    domArr.forEach((i:any, index) => {
      const percentage = Number(state.ruleLevelInfo[index].num) / max
      i.style.width = fullWidth * percentage + 'px'
    })
  }
}

const getMaxData = (value:any) => {
  let max = ''
  value.forEach((i:any) => {
    if (i.length > max.length) {
      max = i
    }
  })
  return max
}

const handleCurrentChange = () => {}

onMounted(() => {
  nextTick(() => {
    drawRuleType()
    getLineWidth()
  })

  window.addEventListener('resize', () => {
    getLineWidth()
  })
})
</script>

<style scoped lang="scss">
.target-warning-rules {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  // padding: 20px 20px 18px 20px !important;
  box-sizing: border-box;
  .early-warning {
    margin-bottom: 10px;
    :deep(.input-with-select) {
      width: 500px;
    }
    :deep(.el-input-group__prepend) {
      background-color: #fff;
      width: 50px;
    }
    :deep(.el-icon-plus::before) {
      font-weight: bolder;
    }
    .my-button {
      margin-left: 10px;
    }
  }

  .wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
  }

  .table-con {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .my-table {
      .leval {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        top: 4px;
      }
      .operate {
        display: inline-block;
        margin-right: 8px;
        color: #0f89f1;
        cursor: pointer;
        i::before {
          color: #0f89f1;
        }
      }
    }

    :deep(.el-pagination) {
      align-self: end;
      margin-top: 18px;
    }
  }

  .my-chart-box {
    width: 20%;
    min-width: 320px;
    height: 100%;
    padding: 0px 0px 50px 20px;
    box-sizing: border-box;
    .rule-type {
      height: calc(50% - 10px);
      margin-bottom: 20px;
    }
    .common-box-style {
      height: calc(50% - 10px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .common-chart-box-style {
      flex: 1;
      padding: 20px 15px 0px 20px;
      background-color: #f9fafc;
      box-sizing: border-box;
      // background-color: rebeccapurple;
    }
    h2 {
      color: #3f3333;
      font-weight: normal;
      font-size: 14px;
      font-weight: 700;
      padding: 8px 10px;
      margin-bottom: 5px;
      background-color: #f9fafc;
    }
    .rule-level {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 60px 20px 60px 20px;
      box-sizing: border-box;
      .chart-line {
        height: calc(100% - 80px);
        border-left: 2px solid #a8b1c4;
        position: absolute;
        top: 40px;
        left: 0px;
        z-index: 10;
      }
      .ball {
        width: 1.16vw;
        height: 1.16vw;
        max-width: 22px;
        max-height: 22px;
        min-width: 12px;
        min-height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 10px;
      }
      .num {
        font-size: 13px;
        color: #308dcc;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        margin-left: 5px;
      }
      .rule-level-item {
        display: flex;
        align-items: center;
      }
      .rule-level-line {
        display: inline-block;
        height: 1.2vw;
        max-height: 25px;
        min-height: 15px;
        background-color: #308dcc;
        position: relative;
        z-index: 20;
      }
    }
  }

  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    :deep(.el-input) {
      flex: 1;
    }
    :deep(.el-select) {
      flex: 1;
    }
    span {
      width: 60px;
      font-size: 15px;
      text-align: right;
      padding-right: 10px;
    }
  }

  .btn-group {
    text-align: right;;
    margin-top: 28px;
  }

  :deep(.el-dialog__body) {
    padding: 10px 25px 30px 25px;
  }

  :deep(.el-table th.el-table__cell) {
    .cell {
      border-right: 1px solid #ccc;
    }
  }
  :deep(.el-table th.el-table__cell:nth-last-child(1)) {
    .cell {
      border-right: none;
    }
  }
  :deep(.el-table--border) {
    border: none;
  }
  :deep(.el-table--border .el-table__cell) {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
  :deep(.el-table--border::after) {
    background-color: #fff;
  }

  :deep(.el-table__border-left-patch) {
    background-color: #fff;
  }
}
</style>